<script lang="ts" setup>
import { h, reactive } from 'vue'

interface Student {
  id: number
  name: string
  age: number
  sex: string
}
const tableData = reactive<Student[]>([
  {
    id: 1,
    name: '王五',
    age: 20,
    sex: '男'
  },
  {
    id: 2,
    name: '张三',
    age: 18,
    sex: ''
  },
  {
    id: 3,
    name: '李四',
    age: 19,
    sex: '女'
  }
])
const tableConfigIndex = reactive<TableConfig<Student>>({
  columns: [
    {
      type: 'index',
      prop: 'index',
      defaultCell: props => h('span', { style: { color: 'red' } }, props.$index === 2 ? 55 : props.$index + 1)
    },
    {
      type: 'default',
      label: '姓名',
      prop: 'name'
    },
    {
      type: 'default',
      label: '年龄',
      prop: 'age'
    },
    { type: 'default', label: '性别', prop: 'sex', width: 200 }
  ]
})
</script>
<template>
  <XyTable :tableConfig="tableConfigIndex" :tableData="tableData" />
</template>
